//控制视频 播放 停止
function play() {
    var video = document.getElementById('video');
    video.play();
    var videoplay = document.getElementById('videoplay');
    videoplay.style.opacity = '0.01';
}
function pause() {
    var video = document.getElementById('video');
    video.pause();
    var videoplay = document.getElementById('videoplay');
    videoplay.style.opacity = '1';
}
//下翻操作
function turn_down() {
    var idArr = [video,img2_1,img2_3,img2_4,img2_5,img2_6,div3_3,div3_1_1,div3_1_2,img3_4_1,img3_5_1,img3_6,img3_7,img3_8,img3_9,img3_10,img3_11,div2_1_1,div2_1_2,div2_1_3,div2_1_4,div2_1_5,div2_1_6,div2_1_7,div1_1_2,content1,content2,content3,footer,div3_2];
    fun9(idArr);
        if(img2_1.style.marginTop == 0){
            fun8();
            var x0 =  img2_1.style.marginTop = '-100%';
            img2_1.style.transition = 'x0,0s';
            var color11 =  div2_1_2.style.backgroundColor = '#00bbee';
            div2_1_2.style.transition = 'color11,0.5s';
            var Arr1 = [div2_1_1,div2_1_3,div2_1_4,div2_1_5,div2_1_6,div2_1_7];
            fun1(Arr1);
            div1_1_2.style.opacity = '1';
            var scale = img2_2.style.transform = 'scale(0.995,0.995)';
            img2_2.style.transition = 'scale,4s';
            //使第一页东西消失
            var displayArr1 = [div3_3,div3_1_1,div3_1_2];
            fun4(displayArr1);
            //第二页文字图片出现
            var wuhu1 = img3_4_1.style.opacity= '1';
            img3_4_1.style.transition = 'wuhu1,2s';
            var wuhu2 = img3_5_1.style.opacity= '1';
            img3_5_1.style.transition = 'wuhu2,2s';
            img3_5_1.style.opacity = '1';
            footer.style.display = 'block';
        }
        else if(img2_2.style.marginTop == 0){
            var x1 =  img2_2.style.marginTop = '-100%';
            img2_2.style.transition = 'x1,1.5s';
            var Arr2 = [div2_1_1,div2_1_2,div2_1_4,div2_1_5,div2_1_6,div2_1_7];
            fun1(Arr2);
            var color2 =  div2_1_3.style.backgroundColor = '#00bbee';
            div2_1_3.style.transition = 'color2,0.5s';
            div1_1_2.style.opacity = '1';
            //第二页文字图片消失
            var opcityArr1 = [img3_4_1,img3_5_1];
            fun3(opcityArr1);
            //第三页文字图片出现
            var inlineArr1 = [img3_6,img3_7,img3_8];
            fun6(inlineArr1);
            var wuhu2 = img3_7.style.opacity = '1';
            img3_7.style.transition = 'wuhu2,2s';
            var wuhu2 = img3_6.style.opacity = '1';
            img3_6.style.transition = 'wuhu2,2s';
            var wuhu2 = img3_8.style.opacity = '1';
            img3_8.style.transition = 'wuhu2,2s';
            footer.style.display = 'block';
        }
        else if(img2_3.style.marginTop == 0){
            var x2 =  img2_3.style.marginTop = '-100%';
            img2_3.style.transition = 'x2,1.5s';
            var color3 =  div2_1_4.style.backgroundColor = '#00bbee';
            div2_1_4.style.transition = 'color1,0.5s';
            var Arr3 = [div2_1_1,div2_1_2,div2_1_3,div2_1_5,div2_1_6,div2_1_7];
            fun1(Arr3);
            div1_1_2.style.opacity = '1';
            var scale = img2_4.style.transform = 'scale(1.05,1.05)';
            img2_4.style.transition = 'scale,4s';
            //第三页文字图片消失
            var opcityArr2 = [img3_6,img3_7,img3_8];
            fun3(opcityArr2);
            //第四页文字图片出现
            img3_9.style.display = 'inline';
            var wuhu3 = img3_9.style.opacity = '1';
            img3_9.style.transition = 'wuhu3,2s';
            footer.style.display = 'block';
        }
        else if(img2_4.style.marginTop == 0){
            var x3 =  img2_4.style.marginTop = '-100%';
            img2_4.style.transition = 'x3,1.5s';
            var color4 =  div2_1_5.style.backgroundColor = '#00bbee';
            div2_1_5.style.transition = 'color1,0.5s';
            var Arr4 = [div2_1_1,div2_1_2,div2_1_3,div2_1_4,div2_1_6,div2_1_7];
            fun1(Arr4);
            div1_1_2.style.opacity = '1';
            var filter = img2_5.style.filter = 'brightness(0.5)';
            img2_5.style.transition = 'filter,3s';
            //第四页文字图片消失
            img3_9.style.opacity= '0.01';
            //第五页文字图片出现
            img3_10.style.display = 'inline';
            var wuhu4 = img3_10.style.opacity = '1';
            img3_10.style.transition = 'wuhu4,3s';
            footer.style.display = 'block';
        }
        else if(img2_5.style.marginTop == 0){
            var x4 = img2_5.style.marginTop = '-100%';
            img2_5.style.transition = 'x4,1.5s';
            var scale = img2_6.style.transform = 'scale(0.995,0.995)';
            img2_6.style.transition = 'scale,4s';
            var color5 =  div2_1_6.style.backgroundColor = '#00bbee';
            div2_1_6.style.transition = 'color1,0.5s';
            var Arr5 = [div2_1_1,div2_1_2,div2_1_3,div2_1_4,div2_1_5,div2_1_7];
            fun1(Arr5);
            div1_1_2.style.opacity = '1';
            //第五页文字图片消失
            img3_10.style.opacity= '0.01';
            //第六页文字图片出现
            img3_11.style.display = 'inline';
            var wuhu5 = img3_11.style.opacity = '1';
            img3_11.style.transition = 'wuhu5,2s';
            footer.style.display = 'block';
        }
        else if(img2_6.style.marginTop == 0){
            var x5 = img2_6.style.marginTop = '-100%';
            img2_6.style.transition = 'x5,1.5s';
            var color6 =  div2_1_7.style.backgroundColor = '#00bbee';
            div2_1_7.style.transition = 'color1,0.5s';
            var Arr6 = [div2_1_1,div2_1_3,div2_1_4,div2_1_5,div2_1_6,div2_1_2];
            fun1(Arr6);
            div1_1_2.style.opacity = '1';
            //第六页文字图片消失
            img3_11.style.opacity= '0.01';
            //第七页文字图片出现
            var blockArr3 = [content1,content2,content3];
            fun5(blockArr3);
            var displayArr2 = [div3_2,footer];
            fun4(displayArr2);
        }
}
//倒置三角操作
function inversion1() {
    var x = setTimeout(triangle1,200);
}
function inversion2() {
    var xx = setTimeout(triangle2,200);
}
function triangle1() {
    var arrow_down = document.getElementById('arrow_down');
    arrow_down.style.transform = 'rotate(180deg)';
    arrow_down.style.transition = 'transform 0.5s';
}
function triangle2() {
    var arrow_down = document.getElementById('arrow_down');
    arrow_down.style.transform = 'rotate(0deg)';
    arrow_down.style.transition = 'transform 0.5s';
}
//七个圆点操作
function circle1() {
    var inlineArr1 = [div3_3,div3_1_1,div3_1_2];
    fun6(inlineArr1);
    var opcityArr1 = [img3_4_1,img3_5_1,img3_6,img3_7,img3_8,img3_9,img3_10,img3_11];
    fun3(opcityArr1);
    var displayArr1 = [content1,content2,content3,footer];
    fun4(displayArr1);
    var blockArr1 = [div3_2];
    fun5(blockArr1);
    video.style.transform = 'translate(0,0)';
    video.style.transition = 'transform 0.5s';
    var imgArr1 = [img2_1,img2_2,img2_3,img2_4,img2_5,img2_6];
    fun2(imgArr1);
    fun10(div2_1_1); 
    var Arr1 = [div2_1_2,div2_1_3,div2_1_4,div2_1_5,div2_1_6,div2_1_7];
    fun1(Arr1);
    div1_1_2.style.opacity = '0.01';
}
function circle2() {
    var displayArr2 = [div3_3,div3_1_1,div3_1_2,content1,content2,content3];
    fun4(displayArr2);
    var opcityArr2 = [img3_6,img3_7,img3_8,img3_9,img3_10,img3_11];
    fun3(opcityArr2);
    var imgArr2 = [img2_2,img2_3,img2_4,img2_5,img2_6];
    fun2(imgArr2);
    var Arr2 = [div2_1_1,div2_1_3,div2_1_4,div2_1_5,div2_1_6,div2_1_7];
    fun1(Arr2);
    var blockArr2 = [div3_2,footer];
    fun5(blockArr2);
    var wuhu1 = img3_4_1.style.opacity = '1';
    img3_4_1.style.transition = 'wuhu1,2s';
    var wuhu2 = img3_5_1.style.opacity = '1';
    img3_5_1.style.transition = 'wuhu2,2s';
    fun8();
    var x1 =  img2_1.style.marginTop = '-100%';
    img2_1.style.transition = 'x1,1s'; 
    var scale = img2_2.style.transform = 'scale(0.995,0.995)';
    img2_2.style.transition = 'scale,1s';
    fun10(div2_1_2); 
    div1_1_2.style.opacity = '1';
}
function circle3() {
    var displayArr2 = [div3_3,div3_1_1,div3_1_2,content1,content2,content3];
    fun4(displayArr2);
    var opcityArr3 = [img3_4_1,img3_5_1,img3_9,img3_10,img3_11];
    fun3(opcityArr3);
    var imgArr3 = [img2_3,img2_4,img2_5,img2_6];
    fun2(imgArr3);
    var Arr3 = [div2_1_1,div2_1_2,div2_1_4,div2_1_5,div2_1_6,div2_1_7];
    fun1(Arr3);
    var blockArr2 = [div3_2,footer];
    fun5(blockArr2);
    img3_6.style.opacity = '1';
    img3_7.style.opacity = '1';
    var wuhu1 = img3_8.style.opacity = '1';
    img3_8.style.transition = 'wuhu1,2s';
    fun8();
    var transitionArr1 = [img2_1,img2_2];
    fun7(transitionArr1);
    fun10(div2_1_3); 
    div1_1_2.style.opacity = '1';
}
function circle4() {
    var displayArr2 = [div3_3,div3_1_1,div3_1_2,content1,content2,content3];
    fun4(displayArr2);
    var opcityArr4 = [img3_4_1,img3_5_1,img3_6,img3_7,img3_8,img3_10,img3_11];
    fun3(opcityArr4);
    var imgArr4 = [img2_4,img2_5,img2_6];
    fun2(imgArr4);
    var Arr4 = [div2_1_1,div2_1_3,div2_1_2,div2_1_5,div2_1_6,div2_1_7];
    fun1(Arr4);
    var blockArr2 = [div3_2,footer];
    fun5(blockArr2);
    var wuhu1 =img3_9.style.opacity = '1';
    img3_9.style.transition = 'wuhu1,2s';
    var scale = img2_4.style.transform = 'scale(1.05,1.05)';
    img2_4.style.transition = 'scale,2s';
    fun8();
    var transitionArr2 = [img2_1,img2_2,img2_3];
    fun7(transitionArr2);
    var x7 =  img2_1.style.marginTop = '-100%';
    fun10(div2_1_4); 
    div1_1_2.style.opacity = '1';
    
}
function circle5() {
    var displayArr2 = [div3_3,div3_1_1,div3_1_2,content1,content2,content3];
    fun4(displayArr2);
    var opcityArr5 = [img3_4_1,img3_5_1,img3_6,img3_7,img3_8,img3_9,img3_11];
    fun3(opcityArr5);
    var wuhu1 = img3_10.style.opacity = '1';
    img3_10.style.transition = 'wuhu1,2s';
    var filter = img2_5.style.filter = 'brightness(0.5)';
    img2_5.style.transition = 'filter,2s';
    fun8();
    var transitionArr3 = [img2_1,img2_2,img2_3,img2_4];
    fun7(transitionArr3);
    var imgArr5 = [img2_5,img2_6];
    fun2(imgArr5);
    fun10(div2_1_5); 
    var Arr5 = [div2_1_1,div2_1_3,div2_1_4,div2_1_2,div2_1_6,div2_1_7];
    fun1(Arr5);
    div1_1_2.style.opacity = '1';
    var blockArr2 = [div3_2,footer];
    fun5(blockArr2);
}
function circle6() {
    var displayArr2 = [div3_3,div3_1_1,div3_1_2,content1,content2,content3];
    fun4(displayArr2);
    var opcityArr6 = [img3_4_1,img3_5_1,img3_6,img3_7,img3_8,img3_9,img3_10];
    fun3(opcityArr6);
    var Arr6 = [div2_1_1,div2_1_3,div2_1_4,div2_1_5,div2_1_2,div2_1_7];
    fun1(Arr6);
    var blockArr2 = [div3_2,footer];
    fun5(blockArr2);
    var wuhu1 = img3_11.style.opacity = '1';
    img3_11.style.transition = 'wuhu1,2s';
    var scale = img2_6.style.transform = 'scale(0.995,0.995)';
    img2_6.style.transition = 'scale,2s';
    fun8();
    var transitionArr4 = [img2_1,img2_2,img2_3,img2_4,img2_5];
    fun7(transitionArr4);
    var x6 = img2_6.style.marginTop = '0';
    img2_6.style.transition = 'x6,1s';
    img2_6.style.marginTop = '';
    fun10(div2_1_6); 
    div1_1_2.style.opacity = '1'; 
}
function circle7() {
    var displayArr3 = [div3_3,div3_1_1,div3_1_2,div3_2,footer];
    fun4(displayArr3);
    var opcityArr7 = [img3_4_1,img3_5_1,img3_6,img3_7,img3_8,img3_9,img3_10,img3_11];
    fun3(opcityArr7);
    var Arr7 = [div2_1_1,div2_1_3,div2_1_4,div2_1_5,div2_1_6,div2_1_2];
    fun1(Arr7);
    var blockArr3 = [content1,content2,content3];
    fun5(blockArr3);
    fun8();
    var transitionArr5 = [img2_1,img2_2,img2_3,img2_4,img2_5,img2_6];
    fun7(transitionArr5);
    fun10(div2_1_7);   
    div1_1_2.style.opacity = '1';
}
//改变圆点的背景颜色为透明
function fun1(arr){
    for(let i = 0;i<arr.length;i++){
        arr[i].style.backgroundColor = 'transparent';
    }
}
//背景图片的行内样式margin-top 为空''
function fun2(arr){
    for(let i = 0;i<arr.length;i++){
        arr[i].style.marginTop = '';
    }
}
//改变图片透明度
function fun3(arr){
    for(let i = 0;i<arr.length;i++){
        arr[i].style.opacity = '0.01';
    }
}
//使元素不存在
function fun4(arr){
    for(let i = 0;i<arr.length;i++){
        arr[i].style.display = 'none';
    }
}
//使元素变成块级元素
function fun5(arr){
    for(let i = 0;i<arr.length;i++){
        arr[i].style.display = 'block';
    }
}
//使元素变成行内元素
function fun6(arr){
    for(let i = 0;i<arr.length;i++){
        arr[i].style.display = 'inline';
    }
}
//设置背景图片的行内样式为margin-top = '-100%' 并添加过渡效果
function fun7(arr){
    var x = [];
    x.length = arr.length;
    for(let i = 0;i<arr.length;i++){
        x[i] = i;
    }
    for(let j = 0;j<arr.length;j++){
        x[j] = arr[j].style.marginTop = '-100%';
        arr[j].style.transition = 'x[i],0.5s';
    }
}
//视频的y轴移动
function fun8(){
    var x1 = video.style.transform = 'translate(0,-100%)';
    video.style.transition = 'x1,1s';
}
//获取通过id获取dom元素
function fun9(arr){
    for(let i = 0;i<arr.length;i++){
        arr[i] = document.getElementById('arr[i]');
    }
}
//改变圆点的背景颜色为蓝色
function fun10(arr){
    var color = arr.style.backgroundColor = '#00bbee';
    arr.style.transition = 'color,0.5s';
}